﻿@page "/gallery/inputs/autocomplete"
@inherits UiComponentBase

<form @onsubmit:preventDefault class=@Class>
<CascadingValue Value=@api.Error>
<div class="shadow sm:rounded-md bg-white dark:bg-black">
    <div class="relative px-4 py-5 sm:p-6">
        <fieldset>
            <legend class=@CssDefaults.Form.LegendClass>Autocomplete Examples</legend>

            <div class="grid grid-cols-6 gap-6">
                
                <div class="col-span-12">
                    <Autocomplete T="Contact" Options="allContacts" @bind-Value="simple" Label="Single Contact"
                        Match="(x, value) => x!.DisplayName.Contains(value, StringComparison.OrdinalIgnoreCase)"
                        placeholder="Select Contact">
                        <Item>
                            <span class="block truncate">@context!.DisplayName</span>
                        </Item>
                    </Autocomplete>
                </div>
                
                <div class="col-span-12">
                    <Autocomplete T="Contact" Options="allContacts" @bind-Value="contact" Label="Single Contact with Icon"
                        Match="(x, value) => x!.DisplayName.Contains(value, StringComparison.OrdinalIgnoreCase)"
                        placeholder="Select Contact">
                        <Item>
                            <div class="flex items-center">
                                <Icon class="h-6 w-6 flex-shrink-0 rounded-full" Src=@context.ProfileUrl />
                                <span class="ml-3 truncate">@context!.DisplayName</span>
                            </div>
                        </Item>
                    </Autocomplete>
                </div>

                <div class="col-span-12">
                    <Autocomplete Options="allContacts" @bind-Values="contacts" Label="Multiple Contacts with Icon"
                        Match="(x, value) => x!.DisplayName.Contains(value, StringComparison.OrdinalIgnoreCase)"
                        placeholder="Select Contacts">
                        <Item>
                            <div class="flex items-center">
                                <Icon class="h-6 w-6 flex-shrink-0 rounded-full" Src=@context.ProfileUrl />
                                <span class="ml-3 truncate">@context!.DisplayName</span>
                            </div>
                        </Item>
                    </Autocomplete>
                    @if (contacts.Count > 0)
                    {
                        <div class="m-4 flex flex-wrap">
                        @foreach (var contact in contacts)
                        {
                            <div @key=@contact.Id class="pt-2 pr-2">
                                <span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300">
                                    @contact.DisplayName
                                    <button type="button" @onclick="_ => removeContact(contact)" class="flex-shrink-0 ml-2 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white dark:focus:text-black">
                                        <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"><path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"></path></svg>
                                    </button>
                                </span>
                            </div>
                        }
                        </div>
                    }
                </div>

            </div>
        </fieldset>
    </div>
    <div class="mt-4 px-4 py-3 bg-gray-50 dark:bg-gray-900 text-right sm:px-6">
        <div class="flex justify-end">
            <SecondaryButton class="mr-4">Cancel</SecondaryButton>
            <PrimaryButton type="submit">Submit</PrimaryButton>
        </div>
    </div>
</div>
</CascadingValue>
</form>

@code {
    [Inject] public JsonApiClient? Client { get; set; }

    ApiResult<QueryResponse<Contact>> apiContacts = new();
    List<Contact> allContacts => apiContacts.Response?.Results ?? new();
    
    Contact? simple;
    Contact? contact;
    List<Contact> contacts = new();
    void removeContact(Contact contact) => contacts.Remove(contact);

    ApiResult<IdResponse> api = new();

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
        apiContacts = await Client!.ApiAsync(new QueryContacts());
    }
}
